@import '../global';

$carousel-indicator-size: .5em !default;
$carousel-indicator-spacing: .2em !default;
$carousel-track-size: 1.5em !default;

@mixin sencha-carousel {
  
  .x-carousel-body {
    overflow: hidden;
    position: relative;
  }
  
  .x-carousel-item {
    position: absolute;
    width: 100%;
    height: 100%;
    //-webkit-transform: translate3d(0px, 0px, 0px);
    
    // This declares the default state (non-moving) for carousel items
    @include transition(matrix3d, 0, ease-out);
  }
  
  .x-android .x-carousel-item {
    //-webkit-transform: translate(0px, 0px);
    @include transition(translate, 0, ease-out);
  }

  .x-carousel-indicator {
    position: absolute;
    z-index: 1;
    vertical-align: middle;
    text-align: center;
    @include display-box;
    @include box-pack(center);
    @include box-align(center);

    span {
      display: block;
      width: $carousel-indicator-size;
      height: $carousel-indicator-size;
      @include border-radius($carousel-indicator-size / 2);
      margin: $carousel-indicator-spacing;
    }
  }
  
  .x-carousel-indicator-horizontal {
    height: $carousel-track-size;
    bottom: 0;
    left: 0;      
    width: 100%;
    @include box-orient(horizontal);
  }
  
  .x-carousel-indicator-vertical {
    width: $carousel-track-size;
    height: 100%;
    right: 0;
    top: 0;
    @include box-orient(vertical);
  }
  
  $indicator-light: rgba(#fff, .1);
  $indicator-light-active: rgba(#fff, .3);
  $indicator-dark: rgba(#000, .1);
  $indicator-dark-active: rgba(#000, .3);

  @include sencha-carousel-indicator-ui('light', $indicator-light, 'flat', $indicator-light-active, 'flat');
  @include sencha-carousel-indicator-ui('dark', $indicator-dark, 'flat', $indicator-dark-active, 'flat');
}

@mixin sencha-carousel-indicator-ui($ui-label, $color, $gradient, $active-color, $active-gradient) {
  .x-carousel-indicator-#{$ui-label} span {
    @include background-gradient($color, $gradient);
    
    &.x-carousel-indicator-active {
      @include background-gradient($active-color, $active-gradient)
    }
  }
}